<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>平面图</title>

    <!-- Babylon.js -->
    <script src="./js/pep.js"></script>
    <script src="./js/dat.gui.min.js"></script>
    <script src="./js/ammo.js"></script>
    <script src="./js/cannon.js"></script>
    <script src="./js/Oimo.js"></script>
    <script src="./js/libktx.js"></script>
    <script src="./js/earcut.min.js"></script>
    <script src="./js/babylon.js"></script>
    <script src="./js/babylon.inspector.bundle.js"></script>
    <script src="./js/babylonjs.materials.min.js"></script>
    <script src="./js/babylonjs.proceduralTextures.min.js"></script>
    <script src="./js/babylonjs.postProcess.min.js"></script>
    <script src="./js/babylonjs.loaders.js"></script>
    <script src="./js/babylonjs.serializers.min.js"></script>
    <script src="./js/babylon.gui.min.js"></script>


    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function () {
        return new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
    };

    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        var camera = new BABYLON.ArcRotateCamera("cam", -Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero());
        var anchor = new BABYLON.TransformNode("");

        camera.wheelDeltaPercentage = 0.01;
        camera.attachControl(canvas, true);

        // Create the 3D UI manager
        var manager = new BABYLON.GUI.GUI3DManager(scene);

        var panel = new BABYLON.GUI.PlanePanel();
        panel.margin = 0.2;
        // panel.columns = 5;
        panel.rows = 5;

        manager.addControl(panel);
        panel.linkToTransformNode(anchor);
        // 初始视图距离
        panel.position.z = -1.5;

        // Let's add some buttons!
        var addButton = function () {
            var button = new BABYLON.GUI.HolographicButton("orientation");
            panel.addControl(button);

            // onPointerClickObservable 指针单击控件（使用鼠标）时触发的事件
            // onPointerDownObservable 指针点击控件时触发的事件
            // onPointerEnterObservable 指针进入控件时触发的事件
            // onPointerMoveObservable 指针移到控件上时触发的事件
            // onPointerOutObservable 指针移出控件时触发的事件
            // onPointerUpObservable 指针向上时触发的事件
            let len = panel.children.length ;
            button.onPointerUpObservable.add(function(){
                test(len)
            });

            button.text = "Button #" + panel.children.length;
        }

        panel.blockLayout = true;

        // 循环数据添加
        /*
        *  440 === 471毫秒
        */
        for (var index = 0; index < 40; index++) {
            addButton();
        }
        panel.blockLayout = false;

        return scene;

    };

    function test(i){
        console.log(i)
    }

    var engine;
    try {
        // 创建巴比伦引擎
        engine = createDefaultEngine();
    } catch (e) {
        console.log("the available createEngine function failed. Creating the default engine instead");
        engine = createDefaultEngine();
    }
    if (!engine) throw 'engine should not be null.';
    scene = createScene();
    ;
    sceneToRender = scene

    engine.runRenderLoop(function () {
        if (sceneToRender) {
            sceneToRender.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>
